<template>
  <view class="orderlist-page">
    <!-- 自定义头部 -->
    <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="header-content">
        <view class="header-left">
          <view class="back-btn" @click="handleBack">
            <image
              class="back-icon"
              src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/back.png"
              mode="heightFix"
            ></image>
          </view>
          <view class="divider"></view>
          <view class="filter-btn" @click="handleFilter">
            <image
              class="filter-icon"
              src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/filter.png"
              mode="heightFix"
            ></image>
            <text class="filter-text">筛选</text>
          </view>
        </view>
        <view class="header-center">
          <text class="header-title">我的订单</text>
        </view>
        <view class="header-right">
          <!-- 右侧预留空间，保持对称 -->
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view
      class="main-content"
      :style="{
        paddingTop: headerHeight + 'px',
        height: `calc(100vh - ${headerHeight}px)`,
      }"
    >
      <!-- 订单状态导航 -->
      <view class="status-tabs">
        <view
          v-for="(tab, index) in statusTabs"
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="handleTabChange(tab.statusType, index)"
        >
          <image class="tab-icon" :src="tab.icon" mode="heightFix"></image>
          <text class="tab-text" :ref="`tabText${index}`">{{ tab.name }}</text>
        </view>
        <!-- 底部滑动指示器 -->
        <view class="tab-indicator" :style="indicatorStyle"></view>
      </view>

      <!-- 订单列表 -->
      <scroll-view
        class="order-list"
        scroll-y
        @scrolltolower="handleLoadMore"
        :lower-threshold="50"
        :refresher-enabled="true"
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
      >
        <view
          v-for="(order, index) in orderList"
          :key="order.id"
          class="order-item"
          @click="viewOrderDetail(order)"
        >
          <text class="order-status">{{ getStatusText(order.status) }}</text>

          <!-- 物流状态 -->

          <view class="order-content" v-for="(item, index) in order.orderDetailVos" :key="index">
            <image
              class="product-image"
              :src="item.listImg"
              mode="aspectFill"
            ></image>
            <view class="product-info">
              <text class="product-name">{{ item.goodsName }}</text>
              <text class="product-desc">共 {{ item.quantity }} 件</text>
              <view class="price-action">
                <text class="product-price">{{ item.price * item.quantity }}</text>
              </view>
            </view>
          </view>
          <view class="logistics-status" v-if="order.wlStatus">
            <image
              class="logistics-icon"
              src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/pending-delivery.png"
              mode="heightFix"
            ></image>
            <text class="logistics-text-status" v-if="order.wlStatus !== '-1'">{{ getLogisticsStatusText(order.wlStatus) }}</text>
            <text class="logistics-text">{{ order.wlInfo }}</text>
          </view>
          <view class="action-buttons">
            <text
              class="action-btn"
              @click.stop="handleViewLogistics($event, order)"
              v-if="order.status !== 1 && order.wlStatus"
              >查看物流</text
            >
            <text class="action-btn" @click.stop="handleReorder($event, order)"
              >再来一单</text
            >
            <text class="action-btn" @click.stop="handleConfirmReceipt($event, order)" v-if="order.status != '3'"
              >确认收货</text
            >
          </view>
        </view>

        <!-- 加载状态 -->
        <view class="load-status" v-if="orderList.length > 0">
          <view v-if="isLoading" class="loading">
            <text class="loading-text">加载中...</text>
          </view>
          <view v-else-if="hasMore" class="load-more">
            <text class="load-more-text">上拉加载更多</text>
          </view>
          <view v-else class="no-more">
            <text class="no-more-text">没有更多数据了</text>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-show="orderList.length === 0 && !isLoading && !tabSwitchLoading && !isTabSwitching">
          <view  class="empty-state">
          <image
            class="empty-icon"
            src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/order/empty-order.png"
            mode="widthFix"
          ></image>
          <text class="empty-text">暂无订单</text>
          <button class="empty-btn" @click="handleMall">即刻选购</button>
        </view>
        </view>
      </scroll-view>
    </view>

    <!-- Tab切换Loading蒙层 -->
    <view v-if="tabSwitchLoading" class="tab-switch-loading-mask">
      <view class="tab-switch-loading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
    </view>

    <!-- 使用uni-popup筛选弹窗 -->
    <uni-popup ref="filterPopup" type="bottom" background-color="#fff">
      <view class="filter-content">
        <view class="filter-header">
          <text class="filter-title">订单筛选</text>
          <view class="close-btn" @click="handleCloseFilter">
            <text class="close-icon">×</text>
          </view>
        </view>

        <view class="filter-body">
          <!-- 下单时间 -->
          <view class="filter-section">
            <text class="section-title">下单时间</text>
            <view class="time-options">
              <view
                v-for="(option, index) in timeOptions"
                :key="index"
                class="time-option"
                :class="{ active: selectedTimeOption === index }"
                @click="handleTimeOptionSelect(index)"
              >
                <text class="option-text">{{ option.label }}</text>
              </view>
            </view>

            <!-- 自定义时间 -->
            <view class="custom-time-section">
              <text class="custom-title">自定义时间</text>
              <view class="time-inputs">
                <view class="time-input-group">
                  <picker
                    mode="date"
                    :value="customStartTime"
                    @change="handleStartDateChange"
                    :start="minDate"
                    :end="maxDate"
                  >
                    <view class="time-input">
                      <text
                        class="time-text"
                        :class="{ placeholder: !customStartTime }"
                      >
                        {{ customStartTime || "起始时间" }}
                      </text>
                    </view>
                  </picker>
                </view>
                <text class="time-separator">—</text>
                <view class="time-input-group">
                  <picker
                    mode="date"
                    :value="customEndTime"
                    @change="handleEndDateChange"
                    :start="customStartTime || minDate"
                    :end="maxDate"
                  >
                    <view class="time-input">
                      <text
                        class="time-text"
                        :class="{ placeholder: !customEndTime }"
                      >
                        {{ customEndTime || "终止时间" }}
                      </text>
                    </view>
                  </picker>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="filter-footer">
          <view class="confirm-btn" @click="handleConfirmFilter">
            <text class="confirm-text">确认</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import orderApi from "@/request/order";

export default {
  data() {
    return {
      statusBarHeight: 0,
      headerHeight: 0,
      activeTab: 3, // 默认选中"全部订单"
      tabTextWidths: [], // 存储每个tab文字的宽度
      tabPositions: [], // 存储每个tab的位置
      // 筛选弹窗相关
      selectedTimeOption: 0, // 默认选中"近1个月"
      customStartTime: "",
      customEndTime: "",
      // 日期选择范围限制
      minDate: "2020-01-01",
      maxDate: new Date().toISOString().split("T")[0], // 今天的日期
      // 滚动加载相关
      isLoading: false,
      hasMore: true,
      isRefreshing: false,
      timeOptions: [
        { label: "近1个月", value: 30 },
        { label: "近2个月", value: 60 },
        { label: "近3个月", value: 90 },
      ],
      totalPage: 0, // 总页数
      statusTabs: [
        {
          name: "待发货",
          icon: "https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/pending-delivery.png",
          status: "pending_delivery",
          statusType: 1
        },
        {
          name: "待收货",
          icon: "https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/pending-receipt.png",
          status: "pending_receipt",
          statusType: 2
        },
        {
          name: "已完成",
          icon: "https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/completed.png",
          status: "completed",
          statusType: 3
        },
        {
          name: "全部订单",
          icon: "https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/all-orders.png",
          status: "all",
          statusType: 0,
        },
      ],
      orderList: [],
      orderParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: (() => {
          const date = new Date();
          date.setMonth(date.getMonth() - 1);
          return date.toISOString().split('T')[0];
        })(),
        endTime: new Date().toISOString().split('T')[0],
      },
      tabSwitchLoading: false,
      isTabSwitching: false, // 新增：标记是否正在切换tab，用于防止空状态闪烁
    };
  },
  onLoad(options) {
    if (options.orderStatus) {
      this.orderParams.status = options.orderStatus;
      this.activeTab = this.statusTabs.findIndex(tab => tab.statusType == options.orderStatus);
    }
    if (options.startTime) {
      this.orderParams.startTime = options.startTime;
    }
    if (options.endTime) {
      this.orderParams.endTime = options.endTime;
    }
    
  },
  computed: {
    indicatorStyle() {
      if (this.tabPositions.length === 0) {
        return { display: "none" };
      }
      const currentTabWidth =
        this.tabTextWidths[this.activeTab] || uni.upx2px(80);
      const currentTabPosition = this.tabPositions[this.activeTab] || 0;
      return {
        width: `${currentTabWidth + uni.upx2px(20)}px`, // 文字宽度(px) + 20rpx边距转px
        transform: `translateX(${currentTabPosition}px)`, // 位置(px)
        transition: "all 0.3s ease",
      };
    },
  },
  mounted() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    this.headerHeight = this.statusBarHeight + uni.upx2px(88);
    this.$nextTick(() => {
      this.calculateTabPositions();
      // 初始化加载数据时也设置切换状态
      this.isTabSwitching = true;
      this.loadOrderList();
    });
  },
  methods: {
    // 订单状态 1-待发货 2-已发货，待收货 3-订单完成
    getStatusText(status) {
      switch (status) {
        case 1:
          return "待发货";
        case 2:
          return "待收货";
        case 3:
          return "已完成";
        default:
          return "";
      }
    },
    // 物流状态 -1-暂无物流信息 0在途，1揽收，2疑难，3签收，4退签，5派件，14拒签。待收货返回，其他状态时返回null.
    getLogisticsStatusText(status) {
      switch (status) {
        case '-1':
          return "暂无物流信息";
        case '0':
          return "运输中";
        case '1':
          return "已揽收";
        case '2':
          return "疑难";
        case '3':
          return "已签收";
        case '4':
          return "退签";
        case '5':
          return "派件中";
        case '14':
          return "拒签";
        default:
          return '';
      }
    },
    handleMall() {
      uni.switchTab({
        url: "/pages/mall/index",
      });
    },
    handleBack() {
      uni.navigateBack();
    },
    handleFilter() {
      this.$refs.filterPopup.open();
    },
    handleCloseFilter() {
      this.$refs.filterPopup.close();
    },
    handleTimeOptionSelect(index) {
      this.selectedTimeOption = index;
      // 清空自定义时间
      this.customStartTime = "";
      this.customEndTime = "";
    },
    handleStartDateChange(e) {
      this.customStartTime = e.detail.value;
      // 如果选择了自定义时间，清空预设时间选择
      this.selectedTimeOption = -1;
    },
    handleEndDateChange(e) {
      this.customEndTime = e.detail.value;
      // 如果选择了自定义时间，清空预设时间选择
      this.selectedTimeOption = -1;
    },
    handleConfirmFilter() {
      let filterCondition = {};

      if (this.selectedTimeOption >= 0) {
        // 使用预设时间选项
        const days = this.timeOptions[this.selectedTimeOption].value;
        const endDate = new Date();
        const startDate = new Date();
        startDate.setDate(startDate.getDate() - days);

        filterCondition = {
          type: "preset",
          days: days,
          startTime: startDate.toISOString().split('T')[0],
          endTime: endDate.toISOString().split('T')[0],
        };
      } else if (this.customStartTime && this.customEndTime) {
        // 使用自定义时间
        filterCondition = {
          type: "custom",
          startTime: this.customStartTime,
          endTime: this.customEndTime,
        };
      }

      console.log("筛选条件:", filterCondition);

      // 这里可以根据筛选条件过滤订单列表
      this.applyFilter(filterCondition);

      // 关闭弹窗
      this.$refs.filterPopup.close();

      uni.showToast({
        title: "筛选完成",
        icon: "success",
      });
    },
    applyFilter(filterCondition) {
      // 实际的筛选逻辑
      if (filterCondition.type && filterCondition.startTime && filterCondition.endTime) {
        console.log("应用筛选条件:", filterCondition);
        this.orderParams.startTime = filterCondition.startTime;
        this.orderParams.endTime = filterCondition.endTime;
        
        // 设置筛选loading状态
        this.isTabSwitching = true;
        this.tabSwitchLoading = true;
        this.orderParams.pageNum = 1;
        this.hasMore = true;
        
        // 立即清空订单列表
        this.orderList = [];
        
        // 短暂延迟后开始加载数据
        setTimeout(() => {
          // 这里可以调用API重新获取筛选后的订单数据
          this.loadOrderList();
        }, 50);
      }
    },
    handleMore() {
      // 更多功能
      console.log("更多");
    },
    handleTabChange(statusType, index) {
      this.activeTab = index;
      this.orderParams.status = statusType;
      // 重置分页数据
      this.orderParams.pageNum = 1;
      this.hasMore = true;
      
      // 立即设置切换状态，防止空状态闪烁
      this.isTabSwitching = true;
      // 设置tab切换loading状态
      this.tabSwitchLoading = true;
      
      // 立即清空订单列表，避免看到旧数据
      this.orderList = [];
      
      // 短暂延迟后开始加载新数据
      setTimeout(() => {
        // 根据选中的tab筛选订单
        this.filterOrders(index);
      }, 50);
    },
    filterOrders(tabIndex) {
      // 根据tab筛选订单数据
      console.log("筛选订单:", this.statusTabs[tabIndex].name);
      this.loadOrderList();
    },
    handleReorder(e, order) {
      // 再来一单
      e.stopPropagation();
      uni.switchTab({
        url: `/pages/mall/index`,
      });
    },
    handleViewLogistics(e, order) {
      // 查看物流
      e.stopPropagation();
      uni.navigateTo({
        url: `/pages/order/logistics?orderId=${order.id}`,
      });
    },
    calculateTabPositions() {
      // 使用uni.createSelectorQuery来获取每个tab的位置和宽度
      const query = uni.createSelectorQuery().in(this);

      // 先获取容器宽度
      query
        .select(".status-tabs")
        .boundingClientRect((tabsRect) => {
          if (!tabsRect) return;

          const containerWidth = tabsRect.width; // px单位
          const tabWidth = containerWidth / 4; // 每个tab占1/4宽度 (px)

          // 计算文字宽度 (先计算rpx，再转换为px)
          this.tabTextWidths = this.statusTabs.map((tab) => {
            // 根据文字长度估算宽度：中文字符约28rpx，英文字符约14rpx
            const chineseChars = (tab.name.match(/[\u4e00-\u9fa5]/g) || [])
              .length;
            const otherChars = tab.name.length - chineseChars;
            const widthInRpx = chineseChars * 28 + otherChars * 14;
            return uni.upx2px(widthInRpx); // 转换为px
          });

          // 计算每个tab的中心位置，然后减去指示器宽度的一半来居中
          this.tabPositions = [];
          for (let i = 0; i < 4; i++) {
            const tabCenterX = i * tabWidth + tabWidth / 2;
            const indicatorWidth = this.tabTextWidths[i] + uni.upx2px(20); // 文字宽度 + 边距 (px)
            const indicatorStartX = tabCenterX - indicatorWidth / 2;
            this.tabPositions.push(indicatorStartX);
          }
          this.$forceUpdate(); // 强制更新视图
        })
        .exec();
    },
    // 加载订单列表
    loadOrderList(isLoadMore = false) {
      if (this.isLoading) return;

      this.isLoading = true;

      const params = {
        pageNum: this.orderParams.pageNum,
        pageSize: this.orderParams.pageSize,
        startTime: this.orderParams.startTime,
        endTime: this.orderParams.endTime,
      };
      if (this.orderParams.status && this.orderParams.status !== 0) {
        params.status = this.orderParams.status;
      }
      orderApi.getOrderList(params).then((res) => {
        console.log(res);

        const orderList = res.list || [];
        this.totalPage = res.totalPage;
        if (isLoadMore) {
          // 加载更多数据
          this.orderList = [...this.orderList, ...orderList];
        } else {
          // 首次加载或刷新
          this.orderList = orderList;
        }

        // 分页处理
        if (!isLoadMore) {
          this.orderParams.pageNum = 1;
        }
        this.isLoading = false;
        
        // 关闭tab切换loading和切换状态
        this.tabSwitchLoading = false;
        this.isTabSwitching = false;

        // 模拟没有更多数据的情况
        if (this.orderParams.pageNum >= this.totalPage) {
          this.hasMore = false;
        }
      }).catch((error) => {
        console.error('获取订单列表失败:', error);
        this.isLoading = false;
        this.tabSwitchLoading = false;
        this.isTabSwitching = false;
        uni.showToast({
          title: '获取订单列表失败',
          icon: 'none'
        });
      });
    },
    // 触底加载更多
    handleLoadMore() {
      if (this.isLoading || !this.hasMore) return;

      if (this.orderParams.pageNum >= this.totalPage) {
        this.hasMore = false;
        return;
      }
      this.orderParams.pageNum++; 
      this.loadOrderList(true);
    },
    handleConfirmReceipt(e, order) {
      e.stopPropagation();
      console.log("确认收货:", order);
      orderApi.confirmReceipt({
        orderId: order.id,
      }).then((res) => {
        uni.showToast({
          title: "确认收货成功",
          icon: "success",
        });
        this.loadOrderList();
      });
    },
    // 查看订单详情
    viewOrderDetail(order) {
      uni.navigateTo({
        url: `/pages/order/detail?orderId=${order.id}`,
      });
    },
    // 下拉刷新
    handleRefresh() {
      console.log("下拉刷新");
      this.isRefreshing = true;
      this.orderParams.pageNum = 1;
      this.hasMore = true;

      setTimeout(() => {
        this.loadOrderList(false);
        this.isRefreshing = false;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.orderlist-page {
  height: 100vh;
  background-color: #fff;
}

.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 999;

  .header-content {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 40rpx;

    .back-btn {
      .back-icon {
        height: 37rpx;
      }
    }

    .divider {
      width: 1rpx;
      height: 40rpx;
      background-color: #e0e0e0;
    }

    .filter-btn {
      display: flex;
      flex-direction: column;
      align-items: center;

      .filter-icon {
        height: 27rpx;
      }

      .filter-text {
        font-size: 20rpx;
        color: #000;
      }

      &.active .filter-text {
        color: #333333;
        font-weight: 600;
      }
    }
  }

  .header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .header-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333333;
    }
  }

  .header-right {
    width: 120rpx; /* 与左侧宽度保持对称 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.main-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.status-tabs {
  background-color: #ffffff;
  display: flex;
  padding: 30rpx 0 20rpx;
  padding-top: 50rpx;
  margin-bottom: 20rpx;
  position: relative;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rpx;
    transition: all 0.3s ease;

    .tab-icon {
      height: 23rpx;
      transition: filter 0.3s ease;
    }

    .tab-text {
      font-size: 26rpx;
      color: #999999;
      transition: color 0.3s ease, font-weight 0.3s ease;
    }

    &.active .tab-text {
      color: #333333;
      font-weight: 600;
    }

    &.active .tab-icon {
      filter: brightness(0) saturate(100%);
    }
  }

  .tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4rpx;
    background-color: #333333;
    border-radius: 2rpx;
    transform-origin: center;
  }
}

.order-list {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 50rpx;
  background-color: #fff;
  .order-item {
    background-color: #fafafa;
    margin: 0 35rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    padding-right: 31rpx;
    padding-bottom: 45rpx;
    position: relative;

    .order-status {
      font-size: 24rpx;
      color: #999999;
      position: absolute;
      right: 31rpx;
      top: 35rpx;
    }
    .action-buttons {
      margin-top: 10rpx;
      text-align: right;

      .action-btn {
        margin: 0;
        font-size: 24rpx;
        color: #000000;
        background-color: #fafafa;
        border: 1.5rpx solid #000000;
        display: inline-block;
        width: 160rpx;
        height: 66rpx;
        line-height: 66rpx;
        text-align: center;
        padding: 0;
        border-radius: 0;
        margin-left: 10rpx;

        &::after {
          border: none;
        }
      }
    }
    .logistics-status {
      display: flex;
      align-items: center;
      margin: 0 31rpx;
      background-color: #fff;
      height: 66rpx;
      padding-left: 20rpx;

      .logistics-icon {
        height: 22rpx;
        margin-right: 10rpx;
        filter: brightness(0) saturate(100%);
      }

      .logistics-text-status {
        font-size: 26rpx;
        color: #000;
        font-weight: 600;
        margin-right: 30rpx;
      }

      .logistics-text {
        font-size: 26rpx;
        color: #4d4d4d;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .order-content {
      padding: 35rpx 30rpx;
      display: flex;
      align-items: flex-start;
      gap: 20rpx;

      .product-image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 0;
        flex-shrink: 0;
      }

      .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16rpx;

        .product-name {
          font-size: 28rpx;
          font-weight: 600;
          color: #333333;
          line-height: 1.4;
          padding-right: 60rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .product-desc {
          font-size: 24rpx;
          color: #999999;
        }

        .price-action {
          margin-top: 10rpx;
          text-align: right;

          .product-price {
            font-size: 32rpx;
            color: #000000;
            display: block;
            text-align: right;
            &::before {
              content: "¥";
              font-size: 20rpx;
              color: #000;
            }
          }
        }
      }
    }
  }
}

/* uni-popup筛选弹窗内容样式 */
.filter-content {
  width: 100%;
  height: 58vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;

  .filter-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 30rpx 30rpx;
    padding-top: 66rpx;
    position: relative;

    .filter-title {
      font-size: 34rpx;
      color: #000;
      text-align: center;
    }

    .close-btn {
      position: absolute;
      right: 30rpx;
      top: 40rpx;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .close-icon {
        font-size: 40rpx;
        color: #999999;
        line-height: 1;
      }
    }
  }

  .filter-body {
    padding: 40rpx 30rpx;
    flex: 1;
    .filter-section {
      .section-title {
        font-size: 24rpx;
        color: #000;
        margin-bottom: 38rpx;
        display: block;
      }

      .time-options {
        display: flex;
        gap: 20rpx;
        margin-bottom: 40rpx;

        .time-option {
          flex: 1;
          height: 76rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2rpx solid #666;
          border-radius: 0;
          background-color: #ffffff;
          transition: all 0.3s ease;

          .option-text {
            font-size: 24rpx;
            color: #808080;
          }

          &.active {
            background-color: #000000;
            border-color: #000000;

            .option-text {
              color: #ffffff !important;
            }
          }
        }
      }

      .custom-time-section {
        .custom-title {
          font-size: 26rpx;
          color: #333333;
          margin-bottom: 20rpx;
          display: block;
        }

        .time-inputs {
          display: flex;
          align-items: center;
          gap: 40rpx;

          .time-input-group {
            flex: 1;

            .time-input {
              width: 100%;
              height: 76rpx;
              border: 2rpx solid #666;
              border-radius: 8rpx;
              padding: 0 20rpx;
              font-size: 24rpx;
              color: #808080;
              background-color: #ffffff;
              box-sizing: border-box;
              display: flex;
              align-items: center;

              .time-text {
                font-size: 24rpx;
                color: #000;

                &.placeholder {
                  color: #666;
                }
              }
            }
          }

          .time-separator {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
    }
  }

  .filter-footer {
    padding: 20rpx 30rpx 40rpx;

    .confirm-btn {
      width: 298rpx;
      height: 66rpx;
      background-color: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;

      .confirm-text {
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }
}

/* 加载状态样式 */
.load-status {
  padding: 30rpx 0;
  text-align: center;

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rpx;

    .loading-text {
      font-size: 24rpx;
      color: #999999;
    }

    &::before {
      content: "";
      width: 32rpx;
      height: 32rpx;
      border: 2rpx solid #f3f3f3;
      border-top: 2rpx solid #333333;
      border-radius: 50%;
      animation: loading-spin 1s linear infinite;
    }
  }

  .load-more {
    .load-more-text {
      font-size: 24rpx;
      color: #999999;
    }
  }

  .no-more {
    .no-more-text {
      font-size: 24rpx;
      color: #999999;
    }
  }
}

@keyframes loading-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 250rpx;

  .empty-icon {
    width: 37rpx;
  }

  .empty-btn {
    width: 240rpx;
    height: 66rpx;
    background-color: #000000;
    color: #ffffff;
    font-size: 24rpx;
    margin-top: 95rpx;
    border-radius: 0;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999999;
    margin-top: 35rpx;
  }
}

/* 淡入淡出过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Tab切换Loading蒙层样式 */
.tab-switch-loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  .tab-switch-loading {
    background-color: #ffffff;
    padding: 40rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

    .loading-spinner {
      width: 60rpx;
      height: 60rpx;
      border: 4rpx solid #f3f3f3;
      border-radius: 50%;
      border-top: 4rpx solid #000;
      animation: spin 1s linear infinite;
      margin-bottom: 20rpx;
    }

    .loading-text {
      font-size: 28rpx;
      color: #000;
      font-weight: 500;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
